<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>支付页面</title>
		<link href="css/pay-style.css" rel="stylesheet" type="text/css">
		<script src="js/jquery.min.js"></script>
	</head>
	<body>
		<section class="aui-flexView">
			<section class="aui-scrollView">
				<div class="aui-flex aui-flex-gradual">
					<div class="aui-flex-user"><img src="images/pay_img/portrait.jpg" alt=""></div>
					<div class="aui-flex-box">
						<h2></h2>
					</div>
				</div>
				<div class="aui-flex-member-list">
					<h2>请选择支付的银行卡</h2>
					<ul class="aui-cho-box" id="bankCardList" id="bankCardList" name="bankCardList">
						<!-- <li class="aui-flex" >
							<div class="aui-flex-box">
								<h3> 卡号 : 0000 **** **** 0000</h3>
								<p>储蓄卡</p>
							</div>
						<li class="aui-flex">
							<div class="aui-flex-box">
								<h3> 卡号 : 0000 **** **** 0000</h3>
								<p>储蓄卡</p>
							</div>
						</li>
						<li class="aui-flex" >
							<div class="aui-flex-box">
								<h3> 卡号 : 0000 **** **** 0000</h3>
								<p>贷记卡</p>
							</div>
						</li>
						<li class="aui-flex on">
							<div class="aui-flex-box">
								<h3> 卡号 : 0000 **** **** 0000</h3>
								<p>贷记卡</p>
							</div>
						</li> -->
					</ul>
					<div style="display:none"><input name="" type="text" value="1" class="auiSks"></div>
					<p class="aui-total b-line"> 需要支付： <span id="money1"></span> 元</p>
				</div>
				<!--密码输入框-->
				<div style="margin:0 auto;width:500px; height: 100px">
					<br><br>
					<form action="" method="post" name="payPassword" id="form_paypsw">
						<div id="payPassword_container" class="alieditContainer clearfix" data-busy="0">
							<label class="i-block">支付密码: </label>
							<div class="i-block" data-error="i_error">
								<div class="i-block six-password">
									<input class="i-text sixDigitPassword" id="payPassword_rsainput" type="password" autocomplete="off" required="required"
									 value="" name="payPassword_rsainput" data-role="sixDigitPassword" tabindex="" maxlength="6" minlength="6"
									 aria-required="true">
									<div tabindex="0" class="sixDigitPassword-box">
										<i style="border-color: transparent;"><b style="visibility: hidden;"></b></i>
										<i><b style="visibility: hidden;"></b></i>
										<i><b style="visibility: hidden;"></b></i>
										<i><b style="visibility: hidden;"></b></i>
										<i><b style="visibility: hidden;"></b></i>
										<i><b style="visibility: hidden;"></b></i>
									</div>
								</div>
								<span>请输入6位支付密码</span>
							</div>
						</div>
					</form>
				</div>
			</section>
			<footer class="aui-tabBar aui-tabBar-fixed">
				<button class="aui-tabBar-btn" onclick="submitpay()">支付</button>
			</footer>
		</section>
		<script src="js/jquery.min.js"></script>
		<script src="js/jquery-validate.js"></script>
		<script src="js/jquery.js" />
		<script type="text/javascript">
			
		</script>
		<script type="text/javascript">
			//银行卡选择
			$(document).ready(function(e) {
				$(".aui-cho-box li").click(function() {
					$(this).addClass("on").siblings().removeClass("on");
					tola();
				});
			});
			//密码输入
			var payPassword = $("#payPassword_container"),
				_this = payPassword.find('i'),
				k = 0,
				j = 0,
				password = '',
				_cardwrap = $('#cardwrap');
			//点击隐藏的input密码框,在6个显示的密码框的第一个框显示光标
			payPassword.on('focus', "input[name='payPassword_rsainput']", function() {
				var _this = payPassword.find('i');
				if (payPassword.attr('data-busy') === '0') {
					//在第一个密码框中添加光标样式
					_this.eq(k).addClass("active");
					_cardwrap.css('visibility', 'visible');
					payPassword.attr('data-busy', '1');
				}
			});
			//change时去除输入框的高亮，用户再次输入密码时需再次点击
			payPassword.on('change', "input[name='payPassword_rsainput']", function() {
				_cardwrap.css('visibility', 'hidden');
				_this.eq(k).removeClass("active");
				payPassword.attr('data-busy', '0');
			}).on('blur', "input[name='payPassword_rsainput']", function() {
				_cardwrap.css('visibility', 'hidden');
				_this.eq(k).removeClass("active");
				payPassword.attr('data-busy', '0');
			});
			//使用keyup事件，绑定键盘上的数字按键和backspace按键
			payPassword.on('keyup', "input[name='payPassword_rsainput']", function(e) {
				var e = (e) ? e : window.event;
				//键盘上的数字键按下才可以输入
				if (e.keyCode == 8 || (e.keyCode >= 48 && e.keyCode <= 57) || (e.keyCode >= 96 && e.keyCode <= 105)) {
					k = this.value.length; //输入框里面的密码长度
					l = _this.size(); //6
					for (; l--;) {
						//输入到第几个密码框，第几个密码框就显示高亮和光标（在输入框内有2个数字密码，第三个密码框要显示高亮和光标，之前的显示黑点后面的显示空白，输入和删除都一样）
						if (l === k) {
							_this.eq(l).addClass("active");
							_this.eq(l).find('b').css('visibility', 'hidden');
						} else {
							_this.eq(l).removeClass("active");
							_this.eq(l).find('b').css('visibility', l < k ? 'visible' : 'hidden');
						}
						if (k === 6) {
							j = 5;
						} else {
							j = k;
						}
						$('#cardwrap').css('left', j * 30 + 'px');
					}
				} else {
					//输入其他字符，直接清空
					var _val = this.value;
					this.value = _val.replace(/\D/g, '');
				}
			});
		</script>
		
		<script type="text/javascript">
			//查询卡列表
			$.ajax({
			    url: "http://www.longm.top:8080/lm/Card/QueryUserCard",
			    type: "POST",
			    dataType: "json",
			    headers: {
			        'Content-Type': 'application/json',
			        "token": window.localStorage.getItem("token")
			    },
			    cache: false,
			    async: false,
			    contentType: "application/x-www-form-urlencoded",
			    data: {},
			    success: function (res) {
			        alert("请求成功");
			        console.log(JSON.stringify(res));
			        if (res.code === 200) {
			            var result = res.data
			            for (var i = 0; i < result.length; i++) {
			                $('#bankCardList').append(
							"<li class='aui-flex' onclick='f2("+'"'+res.data[i].cardnum+'"'+")'>"+
								"<div class=''aui-flex-box'>"+
									"<h3> 卡号 :"+res.data[i].cardnum+"</h3>"+
									"<p>贷记卡</p>"+
								"</div>"+
							"</li>")
			            }
			        }
			    }
			});
		</script>
		<script type="text/javascript">
			var caudnum = localStorage.getItem("cardnum");
			var name = localStorage.getItem("name");
			var money = localStorage.getItem("money");
			document.getElementById("money1").innerHTML=money;
			var scardnum ;

			function f2(card){
				scardnum = card;
			}
			
			function submitpay() {
				var password = $("#payPassword_rsainput").val();
				var data={
					"goalCardNum":caudnum,
					"name":name,
					"totalmoney":money,
					"cardnum":scardnum,
					"password":password
				};
				$.ajax({
					url: "http://www.longm.top:8080/lm/Card/TransferMoney",
					type: "post",
					dataType: 'json',
					headers:{
						'Content-Type':'application/json',
						"token":window.localStorage.getItem("token")
					},
					data: JSON.stringify(data),
					contentType: "application/x-www-form-urlencoded",
					success: function (result) {
						if (result.code === 200) {
							alert(result["data"]);	
							window.location.href = "transferaccounts.html";
						} else {
							alert(result["data"]);
						}
						console.log(JSON.stringify(result));
			
					}
				});
			}
		</script>
	</body>
</html>
